/*
 * @Author: kanglang
 * @Date: 2021-01-26 16:15:46
 * @LastEditors: zeki mini
 * @LastEditTime: 2021-04-12 15:36:05
 * @Description: 设置/更换司机
 */
import React from 'react';
import { Image, SafeAreaView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { msg, XMEmpty } from '@/common';
import { iconRightGray, empty07 } from '@/images';
import { px2dp } from '@/styles';
import supply from '@/api/supply';
import SectionListContacts from '../../components/section-list-contacts';
import SearchInput from '../../components/search-input';

export default class SetDriver extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      driverList: [],
    };
  }

  componentDidMount() {
    this.getCustDriverList();
  }

  render() {
    const { driverList } = this.state;
    return (
      <SafeAreaView style={{ flex: 1 }}>
        <View style={{ paddingHorizontal: px2dp(20), flex: 1 }}>
          <SearchInput
            placeholder='搜索姓名、手机号'
            onChangeText={text => {
              this.getCustDriverList(text);
            }}
          />
          {
            driverList.length > 0 ? (
              <SectionListContacts
                source={driverList}
                firstWord='driverName'
                renderItem={item => this._renderItem(item.item)}
              />
            ) : this.renderXMEmpty()
          }
        </View>
      </SafeAreaView>
    );
  }

    _renderItem = (item) => {
      return (
        <TouchableOpacity
          activeOpacity={0.8}
          style={styles.driverItem}
          onPress={() => { this.setDriver(item); }}
        >
          <View style={styles.driverInfoItem}>
            <Text style={[styles.driverNameInfo, { color: '#343332' }]}>{item.driverName}</Text>
            <Text style={styles.driverPhoneInfo}>{item.driverMobile}</Text>
          </View>
          {
            item.state === '2' &&
            <View style={styles.qjBox}>
              <Text style={styles.qjStyle}>请假中</Text>
            </View>
          }
          {item.state == 3 ? (
            <View style={styles.banStyle}>
              <Text style={styles.banTextStyle}>封禁中</Text>
            </View>
          )
            :
            <Image
              style={styles.rightArrow}
              source={iconRightGray}
            />}
        </TouchableOpacity>
      );
    }

    setDriver = (item) => {
      // if (item.state != 0) {
      //     return msg.emit('app:tip', { text: '该司机在请假中' });
      // }
      if (item.state == 3) {
        return msg.emit('app:tip', { text: '该司机在封禁中' });
      }
      const { navigation } = this.props;
      const state = navigation.state || {};
      const params = state.params || {};
      const { driverData } = params;
      const myParams = {
        carId: driverData && driverData.carId,
        driverId: item && item.driverId,
        type: driverData && driverData.type,
      };
      supply.setDriver(myParams).then(res => {
        if (res.success) {
          msg.emit('router: refreshRoute', {
            routeName: 'OwnerCarDetail',
          });
          msg.emit('router: goToNext', {
            routeName: 'OwnerCarDetail',
            routerFrom: 'setDriver',
            data: {
              id: driverData.carId
            }
          });
        } else {
          msg.emit('app:tip', { text: res.msg });
          setTimeout(() => {
            msg.emit('router: back');
          }, 1500);
        }
      });
    }

    renderXMEmpty = () => {
      return <XMEmpty
        desc='暂没有搜索到相关司机'
        emptyImg={empty07}
        boxStyle={{ marginTop: px2dp(180) }}
      />;
    }

    /**
     * 获取司机列表
     */
    getCustDriverList = (driver = '') => {
      supply.getCustDriverList({
        parm: driver
      }).then(res => {
        if (res.success) {
          this.setState({ driverList: res.data });
        } else {
          this.setState({ driverList: [] });
        }
      });
    }
}

const styles = StyleSheet.create({
  headerBackImg: {
    backgroundColor: 'rgba(255,255,255,0.2)',
    paddingLeft: px2dp(16) * 2,
    paddingRight: px2dp(8) * 2,
    paddingTop: px2dp(6) * 2,
    paddingBottom: px2dp(6) * 2,
    borderTopRightRadius: px2dp(50) * 2,
    borderBottomRightRadius: px2dp(50) * 2,
  },
  headerTitle: {
    color: '#333232',
    fontSize: px2dp(36),
    fontWeight: 'bold'
  },
  driverItem: {
    height: px2dp(128),
    flexDirection: 'row',
    alignItems: 'center',
    borderBottomWidth: px2dp(1),
    borderBottomColor: '#F0EFEF',
    marginHorizontal: px2dp(20),
  },
  driverInfoItem: {
    flexDirection: 'row',
    flex: 1,
  },
  driverNameInfo: {
    fontSize: px2dp(32),
    marginRight: px2dp(20)
  },
  driverPhoneInfo: {
    color: '#999896',
    fontSize: px2dp(32)
  },
  qjBox: {
    width: px2dp(96),
    height: px2dp(48),
    backgroundColor: '#F5F5F5',
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: px2dp(12)
  },
  qjStyle: {
    color: '#999896',
    fontSize: px2dp(24)
  },
  rightArrow: {
    width: px2dp(24),
    height: px2dp(24)
  },
  emptyBox: {
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: px2dp(80)
  },
  emptyText: {
    fontSize: px2dp(28),
    color: '#999896'
  },
  headerTitle: {
    color: '#333232',
    fontSize: px2dp(32),
    fontWeight: 'bold'
  },
  banStyle: {
    left: px2dp(5),
    backgroundColor: '#F5F5F5',
    borderRadius: px2dp(4 * 2),
    paddingVertical: px2dp(2.5 * 2),
    paddingHorizontal: px2dp(6 * 2),
  },
  banTextStyle: {
    color: '#999793',
    fontSize: px2dp(12 * 2),
  },
});
